
<title>所有客户</title>

<link rel="stylesheet" href="/statics/public/vendor/datatables-bootstrap/dataTables.bootstrap.css">
<link rel="stylesheet" href="/statics/public/css/examples/components/basic/modals.css">

<link rel="stylesheet" href="/statics/public/vendor/magnific-popup/magnific-popup.css">
<link rel="stylesheet" href="/statics/public/css/examples/components/advanced/lightbox.css">



<div class="page animation-fade page-index">
    <div class="page-content">

        <div class="panel" style="height: 100%;">


            <div class="panel-body">
                <div style="margin: 20px 0 40px 0">
                    {% if not department %}
                    <div style="display: inline-block; margin-right: 20px">
                         部门:
                         <select name="department_name">
                            <option value="">全部</option>
                                 {% for obj in department_obj %}
                                 <option value="{{ obj.name }}">{{ obj.name }}</option>
                             {% endfor %}
                         </select>
                    </div>
                    {% endif %}

                    <div style="display: inline-block; margin-right: 20px">
                         销售: <input type="text" name="user_name" value="">
                    </div>

                    <div style="display: inline-block; margin-right: 20px">
                         创建时间: <div style="display: inline-block;"><input value=""  class='Wdate form-control' name="create_date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" type="text"/></div>
                    </div>
                    <div style="display: inline-block; margin-right: 20px">
                         最后修改时间: <div style="display: inline-block;"> <input value="" class='Wdate form-control' name="update_date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})" type="text"/></div>
                    </div>

                    <div style="display: inline-block; margin-right: 20px">

                        <button type="button" class="btn btn-block btn-primary" id="Search"><i class="icon fa-search" aria-hidden="true"></i>搜索</button>
                    </div>

                </div>


                <table class="table table-bordered table-hover dataTable table-striped width-full text-nowrap" id="dataTable">
                    <thead>
                    <tr>
                        <th>用户ID</th>
                        <th>编号</th>
                        <th>销售</th>
                        <th>部门</th>
                        <th>客户名称</th>
                        <th>状态</th>
                        <th>记录</th>
                        <th>创建时间</th>
                        <th>最后修改时间</th>
                        <th>备注</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

{# 模态对话框 #}
<div class="modal fade" id="modal" aria-hidden="true" aria-labelledby="examplePositionCenter" role="dialog" tabindex="-1" style="display: none; z-index: 1050">
    <div class="modal-dialog modal-top">
        <div class="modal-content">
        </div>
    </div>
</div>

{# 模态对话框 #}
<div class="modal fade" id="modal2" aria-hidden="true" aria-labelledby="examplePositionCenter" role="dialog" tabindex="-1" style="display: none; z-index: 1051">
    <div class="modal-dialog modal-top" style="width: 700px;">
        <div class="modal-content" style="margin-top: -50px;">
        </div>
    </div>
</div>

<div class="modal fade" id="exampleTabs" aria-hidden="true" aria-labelledby="exampleModalTabs" role="dialog" tabindex="-1" style="display: none;">
    <div class="modal-dialog" style="width: 700px;">
        <div class="modal-content">

        </div>
    </div>
</div>


<div class="modal fade" id="exampleTabs1" aria-hidden="true" aria-labelledby="exampleModalTabs" role="dialog" tabindex="-1" style="display: none;">
    <div class="modal-dialog" style="width: 1000px;">
        <div class="modal-content">

        </div>
    </div>
</div>

{# 右侧显示用户信息模态对话框 #}
<div class="modal fade" id="examplePositionSidebar" aria-hidden="true" aria-labelledby="examplePositionSidebar" role="dialog" tabindex="-1" style="display: none; z-index: 1041;">
    <div class="modal-dialog modal-sidebar modal-sm" style="justify-content: flex-start;">
        <div class="modal-content">

        </div>
    </div>
</div>


<script src="/statics/public/js/examples/components/advanced/lightbox.js" data-deps="popup"></script>

<script src="/statics/public/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="/statics/public/vendor/datatables-bootstrap/dataTables.bootstrap.min.js"></script>
<script src="/statics/public/js/examples/tables/data-tables/api/row-details.js"></script>

<script type="text/javascript" src="/statics/plugins/My97DatePicker/WdatePicker.js"></script>

<script>


    var table = $('#dataTable').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "每页显示 _MENU_ 条",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "第 _START_ 至 _END_ 项，共 _TOTAL_ 项",
            "sInfoEmpty": "第 0 至 0 项，共 0 项",
            "sInfoFiltered": "",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            },
            "oAria": {
                "sSortAscending": ": 以升序排列此列",
                "sSortDescending": ": 以降序排列此列"
            }
        },
        "processing": true,
        "destroy": true,
        "serverSide": true,  // 服务器模式
        "ajax": "?type=ajax_json", // ajax 取数据
        "aaSorting": [
            [7, "desc"]
        ], // 默认排序
        "columns": [
            {
                "data": "id",
                "orderable": false,  // 禁止排序
                "visible": false,       // 不可见
                "searchable": false     // 不可搜索
            },
            {
                "data": "number",
                "orderable": false,  // 禁止排序
                "searchable": false     // 不可搜索
            },
            {
                "data": "user_name"
            },
            {
                "data": "department_name",
                "orderable": false,  // 禁止排序
                "searchable": false     // 不可搜索
            },
            {
                "data": "client_name"
            },
            {
                "data": "status",
{#                    "searchable": false     // 不可搜索#}
            },
            {
                "data": "img",
{#                    "searchable": false     // 不可搜索#}
            },
            {
                "data": "create_date"
            },
            {
                "data": "update_date"
            },
            {
                "data": "remark"
            }
        ]
    });

    var table_ajax_url = table.ajax.url();


    table.on( 'draw', function () {
        $('.popup-with-css-anim').magnificPopup({type:'image'});
    } );




    // 点击表格中的员工信息展示右侧模态对话框
    $(".dataTable tbody").on('click', 'tr', function () {
        var user_id = table.row($(this)).data().id;
        $("#examplePositionSidebar .modal-content").empty();


        var url = "select/" + user_id + '/';

        $.get(url, function (data) {
            $("#examplePositionSidebar .modal-content").html(data);
            $("#examplePositionSidebar").modal('show');
        });
    });

    function aClick(e) {
        e.stopPropagation();     // 通过该命令阻止事件冒泡
    }

    //alert( 'Data source: '+table.ajax.url() );


    $("#Search").on('click', function () {
        var department_name = '';
        if ($("select[name='department_name']").length != 0){

            department_name = $("select[name='department_name']").val();    // 部门
        }

        var user_name = $("input[name='user_name']").val();       // 销售
        var create_date = $("input[name='create_date']").val();   // 创建时间
        var update_date = $("input[name='update_date']").val();   // 修改时间

        var new_table_ajax_url = table_ajax_url + "&department_name=" + department_name + "&user_name=" + user_name + "&create_date=" + create_date + "&update_date=" + update_date;

        table.ajax.url(new_table_ajax_url).load();

    });



</script>
